<script setup>
import { onMounted, ref } from 'vue';


const title = "技术社区";
const activeIndex = 0;
const keywords = "";
const user = null;
 // 文章列表
const articleList = ref([]);
 // 课程列表
const courseList = ref([]);
 // 商品列表
const productList = ref([]);

 const getDa =() => {
  setTimeout(() => {
    articleList.value = [
   { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
   { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
   { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
   { title: "Vue3.0新特性使用攻略", date: "2025-10-21" },
 ];
 // 课程列表
courseList.value = [
   { title: "零基础学习Vue3.0", price: "2025-10-21" },
   { title: "零基础学习Vue3.0", price: "2025-10-21" },
   { title: "零基础学习Vue3.0", price: "2025-10-21" },
   { title: "零基础学习Vue3.0", price: "2025-10-21" },
 ];
 // 商品列表
productList.value = [
   {
     type: "徽章",
     name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
     price: 10,
     stock: 200,
     img: "/images/product01.png",
   },
   {
     type: "帆布包",
     name: "【it社区文创】「极简主义」帆布包",
     price: 50,
     stock: 100,
     img: "/images/product02.png",
   },
   {
     type: "T恤",
     name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
     price: 60,
     stock: 100,
     img: "/images/product03.png",
   },
   {
     type: "笔记本",
     name: "高端皮质IT笔记本，简约设计尽显专业气质",
     price: 30,
     stock: 50,
     img: "/images/product04.png",
   },
   {
     type: "鼠标垫",
     name: "文创字母鼠标垫「IT技术社区专属」",
     price: 15,
     stock: 50,
     img: "/images/product05.png",
   },
   {
     type: "马克杯",
     name: "白色陶瓷杯，简约IT标志，时尚办公新选择",
     price: 20,
     stock: 50,
     img: "/images/product06.png",
   },
 ];
},2000);
};
onMounted(() => {
  getDa();
});
</script>

<template>
  <el-container class="main">
    <el-main >
      <el-carousel height="420px">
        <el-carousel-item>
          <img src="/images/carousel1.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel2.png" />
        </el-carousel-item>
        <el-carousel-item>
          <img src="/images/carousel3.png" />
        </el-carousel-item>
      </el-carousel>
      <el-row>
        <el-col :span="8">
          <div>
            <el-text size="large" type="primary">热门文章</el-text>
            <el-button size="small">查看更多</el-button>
          </div>
          <ul>
            <li v-for="(item, i) in articleList" :key="i">
              <p>{{ item.title }}</p>
              <el-text size="small" type="success">{{ item.date }}</el-text>
            </li>
          </ul>
        </el-col>
        <el-col :span="8">
          <div>
            <el-text size="large" type="primary">热门课程</el-text>
            <el-button size="small" style="float: right; margin-right: 20px"
              >查看更多</el-button
            >
          </div>
          <el-skeleton :row="4" animated :loading="!articleList.length">
          <ul>
            <li v-for="(item, i) in courseList" :key="i">
              <p>{{ item.title }}</p>
              <el-text size="small" type="danger">{{ item.price }}</el-text>
            </li>
          </ul>
          </el-skeleton>
        </el-col>
        <el-col :span="8">
          <div>
            <el-text size="large" type="primary">热门商品</el-text>
            <el-button size="small" style="float: right; margin-right: 20px"
              >查看更多</el-button
            >
          </div>
          <el-carousel height="240px">
            <el-carousel-item v-for="(item, i) in productList" :key="i">
              <img :src="item.img" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<style></style>
